<template>
  <div class="header-btn-container">
    <hover-container
      :tooltip-content="appStateStore.sideBarCollapse ? '展开菜单' : '折叠菜单'"
    >
      <div class="flex-between" style="width: 40px">
        <n-icon
          style="cursor: pointer"
          size="24"
          color="#000000"
          @click="appStateStore.toggleSideBarCollapse"
          :component="
            !appStateStore.sideBarCollapse
              ? MenuFoldOutlined
              : MenuUnfoldOutlined
          "
        />
      </div>
    </hover-container>
  </div>
</template>

<script lang="ts" setup>
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@vicons/antd";
import { useAppStateStore } from "@/store/modules/system/appState";
import HoverContainer from "@/components/Common/HoverContainer.vue";

const appStateStore = useAppStateStore();
</script>

<style scoped></style>
